import React, { useState, useEffect, useRef } from "react";
import Head from "./head";
import { Card, Row, Col, Input, Tooltip, message } from "antd";
import { ProDescriptions } from "@ant-design/pro-components";
import { Outlet, useLocation, history, useOutletContext, useModel } from "umi";
import dayjs from "dayjs";
import { doFetch } from "@/utils/doFetch";

let col = { xs: 24, sm: 24, md: 8, lg: 7, xl: 6, xxl: 5 },
  cols = { xs: 24, sm: 24, md: 16, lg: 17, xl: 18, xxl: 19 };

function Mycenter() {
  const actionRef = useRef();
  const {
    initialState: { currentUser, fetchUserInfo },
    setInitialState,
  } = useModel("@@initialState");
  const location = useLocation();

  const columns = [
    {
      title: "用户名",
      key: "name",
      dataIndex: "name",
      copyable: true,
      ellipsis: true,
      editable: (text, record) => {
        return record?.is_admin;
      },
    },
    {
      title: "真实姓名",
      key: "real_name",
      dataIndex: "real_name",
      ellipsis: true,
    },
    {
      title: "手机号",
      key: "phone",
      dataIndex: "phone",
      ellipsis: true,
      formItemProps: {
        rules: [
          {
            pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
            message: "手机号格式不正确",
          },
          {
            required: true,
            message: "此项为必填项",
          },
        ],
      },
    },
    {
      title: "密码",
      key: "password",
      dataIndex: "password",
      valueType:"password"
    },
    {
      title: "邮箱",
      key: "email",
      dataIndex: "email",
      ellipsis: true,
    },
    {
      title: "职位",
      key: "position",
      dataIndex: "position",
      ellipsis: true,
    },
    {
      title: "性别",
      key: "sex",
      dataIndex: "sex",
      valueType: "radio",
      valueEnum: {
        open: {
          text: "男",
          status: "1",
        },
        closed: {
          text: "女",
          status: "2",
        },
      },
      options: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
    },
    {
      title: "微信昵称",
      key: "nick_name",
      dataIndex: "nick_name",
      ellipsis: true,
      editable: false,
    },
    {
      title: "国家",
      key: "country",
      dataIndex: "country",
      ellipsis: true,
      editable: false,
    },
    {
      title: "省份",
      key: "province",
      dataIndex: "province",
      ellipsis: true,
      editable: false,
    },
    {
      title: "城市",
      key: "city",
      dataIndex: "city",
      ellipsis: true,
      editable: false,
    },
    {
      title: "生日",
      key: "birthday",
      dataIndex: "birthday",
      ellipsis: true,
      valueType: "date",
      render: (text, rows) => {
        return rows?.birthday
          ? dayjs(rows?.birthday)?.format("YYYY-MM-DD")
          : "-";
      },
    },
  ];

  return (
    <div className="contain noline">
      <Row gutter={24} style={{ display: "flex", marginTop: 12 }}>
        <Col {...col}>
          <Card
            hoverable
            style={{ flexShrink: 0, padding: "32px 0", marginBottom: 23 }}
          >
            <Head
              defaultImg={currentUser?.head_image}
              fetchUserInfo={async () => {
                const currentUser = await fetchUserInfo();
                setInitialState((s) => {
                  return {
                    ...s,
                    currentUser,
                  };
                });
              }}
            ></Head>
          </Card>
        </Col>

        <Col {...cols}>
          <Card
            title="用户信息"
            hoverable
            tabList={[
              {
                key: "1",
                tab: "基础信息",
              },
              {
                key: "2",
                tab: "我的待办",
              },
              {
                key: "3",
                tab: "我处理的",
              },
            ]}
            onTabChange={(val)=>{
              if(val=="1") return;
              message.info("敬请期待...")
            }}
          >
            <ProDescriptions
              actionRef={actionRef}
              // bordered
              formProps={{}}
              title="用户信息"
              request={async () => {
                return Promise.resolve({
                  success: true,
                  data: currentUser,
                });
              }}
              editable={{
                onSave: (key, row) => {
                  doFetch({
                    url: "/user/setting",
                    params: { [key]: row[key] },
                    method: "PUT",
                  }).then(async () => {
                    if(key=="password"){
                      localStorage.clear();
                      history.push("/user");
                      message.warning("您已修改密码请重新登录！");
                      return
                    }

                    const currentUser = await fetchUserInfo();
                    setInitialState((s) => {
                      return {
                        ...s,
                        currentUser,
                      };
                    });
                  });
                },
              }}
              column={1}
              columns={columns}
            ></ProDescriptions>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default Mycenter;
